<template>
    <Modal
            v-model="modalShow"
            width="700"
            :title="getModalTitle"
            :mask-closable="false"
    >
        <div class="modal-container">
            <Row type="flex" justify="space-around" class="file-item" v-for="(item,index) in filePath" :key="index">
                <Col span="18">{{getUrlImgName(item)}}</Col>
                <Col class="file-item-icon">
                    <Icon type="ios-cloud-download-outline" size="22"
                      @click.native="openWinUrl(item)"></Icon>
                </Col>
            </Row>
        </div>
        <div slot="footer">
            <Button type="text" @click="cancelAction">关闭</Button>
        </div>
    </Modal>
</template>

<script>

export default {
  name: 'FileShowModal',
  data () {
    return {
      modalShow: false,
      filePath: [],
      loading: false,
      modalTitle: '',
      modelType: '',
      tableRow: {},
      format: ['doc', 'docx']
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    },
    getModalTitle () {
      return '查看【' + this.modalTitle + '】材料'
    }
  },
  methods: {
    modelAction (val, path) {
      this.modelType = val
      this.filePath = (path.substring(path.length - 1) === ',') ? path.substring(0, path.length - 1).split(',') : path.split(',')
      if (this.modalShow === false) {
        switch (val) {
          case 'san_ding':
            this.modalTitle = '三定方案依据'
            break
          case 'fa_lv_fa_gui':
            this.modalTitle = '法律法规依据'
            break
          case 'wen_jian':
            this.modalTitle = '国家、省、市相关文件依据'
            break
        }
      }
      this.modalShow = !this.modalShow
    },
    cancelAction () {
      this.modalShow = false
    },
    getUrlImgName (url) {
      let pos = url.lastIndexOf('/')
      if (pos === -1) {
        pos = url.lastIndexOf('\\')
      }
      let filename = url.substr(pos + 1)
      if (filename.indexOf('?') !== -1) {
        let arr = filename.split('?')
        filename = arr[0]
      }
      return filename
    },
    openWinUrl (item) {
      window.open(item)
    },
    uploadFilter (file, uploadList, filterReturn) {
      let isExit = false
      if (uploadList.length > 0) {
        uploadList.forEach(item => {
          if (item.url.indexOf(file.name) !== -1) {
            isExit = true
          }
        })
      }
      if (isExit) {
        this.errMsgAction(file.name, '【文件已经存在】')
        return { errcode: false, selfShow: true }
      }
      return { errcode: true }
    },
    ossFilesResultAction (val) {
      // console.log('图片处理结束', val)
    },
    errMsgAction (title, desc) {
      this.$Notice.warning({
        title: title,
        desc: desc,
        duration: 0
      })
    }
  }
}
</script>

<style scoped>
    .modal-container {
        height: 150px;
        padding: 25px 40px;
        overflow-y: auto;
    }
    .file-item {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .file-item-icon {
        cursor: pointer;
        display: inline-block;
    }
</style>
